<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 1170px;
            height: 300px;
            background-color: #DDD;
            margin: auto;
        }
        .red{
            color:red;
        }
    </style>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const dom = {
        name: 'div',
        attributes: {
            className: 'container'
        },
        children: [{
                name: 'h1',
                attributes: {
                    title: 'react',
                    className:'red'
                },
                text:'hello 虚拟DOM'
            },
            {
                name: 'img',
                attributes: {
                    src: './imgs/react.jpg',
                    title: 'react'
                }
            }
        ]
    }

    // 将js所描述的对象, 解析解析成真实dom
    const div = document.createElement(dom.name);
    Object.keys(dom.attributes).forEach(key => {
        div.style[key] = dom.attributes[key];
    });

    // 循环创建子标签
    dom.children.forEach(item => {
        // 创建子元素
        const child = document.createElement(item.name);
        // 将子元素挂在到父元素上
        div.appendChild(child);
        // 创建子元素属性
        Object.keys(item.attributes).forEach(key => {
            child[key] = item.attributes[key];
        });
        if(item.text){
            child.innerHTML=item.text;
        }
        console.log(item);
    });

    //    将父元素挂在到页面上
    document.querySelector('#app').appendChild(div);
</script>

</html>